<template>
    <div class="l-rblock l-desktop" >
        <div v-show="steps(0)" class="l-rblock" style="padding:24px;" >
            <div class="l-page-panel" >
                <el-form :model="formData" :rules="rules" size="mini"  ref="baseInfo" label-width="80px" >
                    <el-col :span="24">
                        <el-form-item :label="$t('编号')" prop="f_Code">
                            <el-input v-model="formData.f_Code"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('名称')" prop="f_Name">
                            <el-input v-model="formData.f_Name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('图标')" prop="f_Icon">
                            <l-input-icon :iconList="lr_icons"  v-model="formData.f_Icon" >
                            </l-input-icon>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('上级')" prop="f_PModuleId">
                            <l-tree-select
                                v-model="formData.f_PModuleId"
                                :options="modulesExpandTree">
                            </l-tree-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('排序')" prop="f_SortCode">
                            <el-input-number v-model="formData.f_SortCode"  controls-position="right" :min="1" ></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('菜单')"  prop="f_IsMenu" >
                                <el-switch
                                :active-value="1"
                                :inactive-value="0"
                                v-model="formData.f_IsMenu"
                                >
                            </el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('首屏')"  prop="f_IsFirst"  >
                                <el-switch
                                :active-value="1"
                                :inactive-value="0"
                                v-model="formData.f_IsFirst"
                                >
                            </el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('状态')"  prop="f_EnabledMark"  >
                            <el-switch
                                :active-value="1"
                                :inactive-value="0"
                                v-model="formData.f_EnabledMark"
                                >
                            </el-switch>
                        </el-form-item>
                    </el-col>

                    
                    <el-col :span="24">
                        <el-form-item :label="$t('描述')" prop="f_Description">
                            <el-input type="textarea" :rows="4" v-model="formData.f_Description"></el-input>
                        </el-form-item>
                    </el-col>                   
                </el-form>
            </div>
        </div>
        <div v-show="steps(1)" class="l-rblock" >
            <l-quick-bi-design :isShow="steps(1)" ref="quickBiDesign" :componentList="componentList" ></l-quick-bi-design>
        </div>
    </div>
</template>
<script>

import { mapGetters } from "vuex";
import componentList from './components'
import './components/base'
import './components/view'

export default {
    props:{
        stepActive:{
            type:Number,
            default:0
        }
    },
    data(){
        return {
            componentList,
            formData:{
                f_Type:1,
                f_Code:'',
                f_Name:'',
                f_Icon: 'learun-icon-computer',
                f_PModuleId:'',
                f_ModuleId:'',
                f_SortCode:'',
                f_IsMenu:0,
                f_EnabledMark:1,
                f_IsFirst:1,
                f_Description:''
            },
            rules: {
                f_Code: [
                    { required: true, message: '请输入编号',trigger: 'blur' },
                    { validator: this.lr_existDbFiled,keyValue:() => { return this.formData.f_ModuleId },tableName:'lr_base_module',fieldName:'f_EnCode',keyName:'f_ModuleId',trigger: 'null'}
                ],
                f_Name: [
                    { required: true, message: '请输入名称',trigger: 'blur' }
                ],
                f_Icon: [
                    { required: true, message: '请选择图标',trigger: 'blur' }
                ],
            },
            layout: [],
        }
    },
    computed:{
        ...mapGetters(["modulesExpandTree"]),
    },
    created(){
        this.lr_loadDataSourceList && this.lr_loadDataSourceList()
    },
    mounted () {
    },
    methods:{
        resetForm(){
            this.formData.f_Id = ''
            this.formData.f_ModuleId = ''
            this.$refs.baseInfo && this.$refs.baseInfo.resetFields()
            this.$refs.quickBiDesign && this.$refs.quickBiDesign.set([])
        },
        getForm(){
            const postData = {
                lr_desktop_infoEntity:this.$deepClone(this.formData),
                lr_desktop_schemeEntity:{
                    f_Content:JSON.stringify(this.$refs.quickBiDesign.get())
                }
            }
            postData.moduleEntity = {
                f_EnCode: postData.lr_desktop_infoEntity.f_Code,
                f_FullName: postData.lr_desktop_infoEntity.f_Name,
                f_ParentId: postData.lr_desktop_infoEntity.f_PModuleId,
                f_Icon: postData.lr_desktop_infoEntity.f_Icon,
                f_Target: `desktop${postData.lr_desktop_infoEntity.f_IsFirst}`, // 桌面设计
                f_IsMenu: postData.lr_desktop_infoEntity.f_IsMenu,
                f_DeleteMark:0,
                f_UrlAddress:`${postData.lr_desktop_infoEntity.f_Code}`,
                f_EnabledMark:postData.lr_desktop_infoEntity.f_EnabledMark,
                f_SortCode: postData.lr_desktop_infoEntity.f_SortCode,
                f_Description: postData.lr_desktop_infoEntity.f_Description
            }


            return new Promise((resolve)=>{
                window.html2canvas(this.$refs.quickBiDesign.biPanel, {
                    useCORS: true,
                    backgroundColor: false,
                    allowTaint: true,
                }).then(canvas => {
                    //判断画布不为空
                    if(canvas.width!=0&&canvas.height!=0){
                        postData.lr_desktop_infoEntity.img = canvas.toDataURL('image/jpeg')
                    }
                    resolve(postData)

                })
            })

           
        },
        setForm(data){
            this.formData = data.lr_desktop_infoEntity
            this.$refs.quickBiDesign.set(JSON.parse(data.lr_desktop_schemeEntity.f_Content))
        },

        steps(num){
            return this.stepActive == num
        },
        validateBaseInfo(){
            return new Promise((resolve) => {
                this.$refs.baseInfo.validate((valid) => {
                    if(valid){
                        resolve(true)
                    }
                    else{
                        resolve(false)
                    }
                })
            })
        },
        validateSteps(){
            return new Promise((resolve) => {
                if(this.stepActive == 0){
                    // 判断基础信息是否填写完整
                    this.validateBaseInfo().then(res=>{
                        resolve(res)
                    })
                }
                else{
                    resolve(true)
                }
            });
        }
    }
}
</script>

